<template>
    <div style="height: 50px;box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);padding: 0 10px;">
        <div style="float: left;font-size: 35px;line-height: 50px;font-family: 华文行楷">欢迎光临尤八哥官网</div>
        <div style="float: right;line-height: 45px;">
            <el-link v-show="showLogin"  @click="toLogin" style="margin-right: 1rem">立即登录</el-link>
            <span v-show="!showLogin" style="margin-right: 1rem">欢迎：{{nickName}}</span>
            <el-link :icon="Service" @click="toService">立即咨询</el-link>
        </div>
        <!--<div style="float: right;line-height: 45px;">-->
            <!--<el-avatar  style="height:40px;width: 40px;margin: 2px" src="/zuotian.jpg" />-->
            <!--<div style="float: right;line-height:45px;">{{nickName}}</div>-->
        <!--</div>-->
    </div>
    <div style="margin:0 auto; width: 98%">
        <el-carousel :interval="3000" type="card" height=350px>
            <el-carousel-item v-for="item in images" :key="item.url" >
                <el-image style="width: 100%; height: 100%;border-radius: 5px" :src="item.url" fit="cover"/>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div style="margin:auto;height: 350px;width: 90%;">
        <div style="height: 100%;float: left;width: 23%;margin:1%" v-for="(image,i) in grids" :key="image">
            <div style="text-align: center;font-size: 20px">{{image.title}}</div>
            <el-image style="width: 100%; height: 100%;border-radius: 5px" :preview-src-list="grids.map(e => e.url)" :initial-index="i" :src="image.url" fit="cover"/>
        </div>
    </div>
    <ClientLogin ref="clientLogin" @afterLogin="logined"/>
</template>

<script setup>
    import {nextTick, reactive, ref, onMounted,computed} from 'vue'
    import ClientLogin from "@/views/client/ClientLogin.vue"
    import {ElMessage} from 'element-plus'
    import {Service} from '@element-plus/icons-vue'
    import request from '@/utils/request.js'
    import moment from 'moment'
    import PlayAudio from '@/components/business/PlayAudio.vue'
    import router from '@/router'
    let playAudio = ref(null)
    let customer = reactive({nickName:"XX"})
    let clientLogin = ref(null)
    let msgArea = ref()
    let chatId;
    let userId  = new Date().getTime().toString();
    let websocket =  null
    let audioSrc = ref("")
    const currentDate = ref(new Date())
    let showLogin = ref(true)

    const images = reactive([])
    const grids = reactive([
        // {src:'./ma3.gif',text:'文字',title:'闪电五连鞭演示'},
        // {src:'./ma2.jpg',text:'文字',title:'马老师劝年轻人耗子尾汁'},
        // {src:'./ma5.jpg',text:'文字',title:'浑圆太极实战演练'},
        // {src:'./ma8.gif',text:'文字',title:'错误示范，大意没有闪'},
    ]);
    onMounted(()=>{
        request.post("/api/portal/getCarousels", {valid:1}).then(resp => {
            images.splice(0, images.length)
            images.push(...resp)
        })
        request.post("/api/portal/getCards", {valid:1}).then(resp => {
            grids.splice(0, grids.length)
            grids.push(...resp)
        })
        document.querySelector("title").text = "尤八哥"
        let tempCust = sessionStorage.getItem("customer")
        if(!tempCust){
            showLogin.value = true
        }else{
            for(let key in tempCust){
                customer[key] = tempCust[key]
            }
            showLogin.value = false;
        }
    })

    function toLogin() {
        clientLogin.value.showDialog = true
    }
    function toService() {
        let jump_url = router.resolve({path: "/client"});
        console.log(jump_url)
        // router.push("/client")
        window.open(jump_url.href)
    }

    function logined(cust) {
        for(let key in cust){
            customer[key] = cust[key]
        }
        sessionStorage.setItem("customer", JSON.stringify(customer))
        showLogin.value = false
    }
    let nickName = computed(() => {
        let nickName = customer.nickName
        let len =  nickName.length
        return len > 2 ? nickName.substr(len -2, len) : nickName
    })
</script>
<style lang="css" scoped>
    .tip {
        border-radius: 10px;
        padding: 10px;
        width:auto;
        display:inline-block !important;
        word-wrap: break-word;
        word-break: break-all;
        text-align:left;
        max-width:60%;
    }
    .time {
        padding: 5px;
        display:inline-block;
        color: #9a9b9e;
        font-size: 13px;
    }
    .item {
        margin-top: 5px;
    }
    .right {
        background-color:  #a7e861;
    }
    .left {
        background-color:  white;
    }
    .span-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;}
    .btn-bell-badge {
        width: 26px;
        height: 18px;
        margin-left:5px;
        line-height:18px;
        border-radius: 15px;
        background: #f56c6c;}
    .num {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #fff;
    }
    .content::after{
        content: "";
        background-image: url('/zuotian.jpg');
        opacity:0.5;
    }
    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
    .time {
        font-size: 12px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button {
        padding: 0;
        min-height: auto;
    }

    .image {
        width: 100%;
        display: block;
    }
    .main::-webkit-scrollbar {
        width: 4px !important;
    }
    .main::-webkit-scrollbar-thumb {
        border-radius: 10px !important;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
        opacity: 0.2 !important;
    }
    .main::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
        border-radius: 0 !important;
    }
</style>